<template>
    <div class="clockIn-container">
        <el-breadcrumb separator="/" style="padding-left: 10px; padding-bottom: 10px; font-size: 12px">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>健康报备</el-breadcrumb-item>
            <el-breadcrumb-item>健康打卡</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card style="height: 590px">
            <!-- 打卡成功 -->
            <el-alert
                :closable="false"
                style="margin-bottom: 20px"
                v-if="reported"
                show-icon
                :title="'今日已成功打卡,勤洗手,戴口罩,不群聚,打卡时间:[' + clockInForm.createTime + ']'"
                type="success"
            >
            </el-alert>

            <div slot="header" style="margin-bottom: 5px">
                <span style="font-weight: bold; font-size: 14px">基本信息</span>
                <div style="float: right; vertical-align: center">
                    <el-button @click="OpenHistory" size="mini" type="warning">签到记录</el-button>
                    <el-button type="primary" size="mini" @click="onSubmit" v-if="!reported">立即打卡</el-button>
                    <el-button @click="reset" size="mini" v-if="!reported">重置</el-button>
                </div>
            </div>
            <!-- 右边抽屉 -->
            <el-drawer title="历史记录" :visible.sync="drawer" :with-header="true">
                <span>
                    <el-card
                        class="box-card"
                        v-for="item in this.historyTable"
                        :key="item.id"
                        style="margin-bottom: 10px"
                    >
                        <div class="text item">
                            <ul>
                                <li>打卡人:{{ userInfo.username }}</li>
                                <li>打卡位置:{{ item.address }}</li>
                                <li>打卡时间:{{ item.createTime }}</li>
                                <li>
                                    健康状况:
                                    <div style="float: right">
                                        <el-tag v-if="item.situation == 0" size="small" effect="dark" type="success"
                                            >健康</el-tag
                                        >
                                        <el-tag v-else-if="item.situation == 1" size="small" effect="dark" type="danger"
                                            >发热</el-tag
                                        >
                                        <el-tag
                                            v-else-if="item.situation == 2"
                                            size="small"
                                            effect="dark"
                                            type="warning"
                                            >其他情况</el-tag
                                        >
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </el-card>
                    <!--   分页   -->
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page="queryMap.pageNo"
                        :page-size="queryMap.pageSize"
                        style="margin-top: 20px; float: right"
                        background
                        small
                        layout="prev, pager, next"
                        :total="historyTotal"
                    >
                    </el-pagination>
                </span>
            </el-drawer>
            <!-- 打卡人信息 -->
            <el-form size="small" label-width="80px">
                <el-row :gutter="20">
                    <el-col :span="5">
                        <div class="grid-content bg-purple">
                            <el-form-item label="打卡人">
                                <el-input v-model="userInfo.username" disabled></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <div class="grid-content bg-purple">
                                <el-form-item label="打卡时间">
                                    <el-date-picker
                                        disabled
                                        v-model="nowTime"
                                        type="datetime"
                                        placeholder="选择日期时间"
                                    >
                                    </el-date-picker>
                                </el-form-item>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <div class="grid-content bg-purple">
                                <el-form-item label="所属部门">
                                    <el-input v-model="userInfo.department" disabled></el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-form>

            <h5 style="margin: 0px; padding: 0px">健康打卡</h5>
            <el-divider></el-divider>
            <el-form
                size="small"
                :inline="true"
                :label-position="'top'"
                :model="clockInForm"
                :rules="rules"
                ref="clockInFormRef"
                label-width="100px"
                class="demo-clockInForm"
            >
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-form-item label="省份" prop="valueProvince">
                                <el-select
                                    :disabled="reported"
                                    v-model="clockInForm.valueProvince"
                                    placeholder="请选择省"
                                    @change="changeProvince"
                                >
                                    <el-option
                                        v-for="item in provinceList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-form-item label="城市" prop="valueCity">
                                <el-select
                                    :disabled="reported"
                                    v-model="clockInForm.valueCity"
                                    placeholder="请选择市"
                                    @change="changeCity"
                                >
                                    <el-option
                                        v-for="item in cityOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-form-item label="区县" prop="valueOrigin">
                                <el-select
                                    :disabled="reported"
                                    v-model="clockInForm.valueOrigin"
                                    placeholder="请选择区"
                                    @change="changeOrigin"
                                >
                                    <el-option
                                        v-for="item in originOptions"
                                        :key="item.label"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-form-item v-if="reported" label="打卡位置" prop="valueOrigin">
                                <el-tag size="small">
                                    {{ clockInForm.address }}
                                </el-tag>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="目前健康状况" prop="situation">
                                <el-radio-group :disabled="reported" v-model="clockInForm.situation">
                                    <el-radio :label="0">健康</el-radio>
                                    <el-radio :label="1">有咳嗽发热症状</el-radio>
                                    <el-radio :label="2">其他情况</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item
                                label="接触的人是否有疑似症状?  (冠状病毒检测结果为阳性或尚在等待检测结构)"
                                prop="touch"
                            >
                                <el-radio-group :disabled="reported" v-model="clockInForm.touch">
                                    <el-radio :label="1">是</el-radio>
                                    <el-radio :label="0">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="自2020年1月1日起,是否在湖北省停留过 (保存转车路过)" prop="passby">
                                <el-radio-group :disabled="reported" v-model="clockInForm.passby">
                                    <el-radio :label="1">是</el-radio>
                                    <el-radio :label="0">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item
                                label="自2020年1月1日起,是否有接待过来自湖北的客户,亲戚或朋友)"
                                prop="reception"
                            >
                                <el-radio-group :disabled="reported" v-model="clockInForm.reception">
                                    <el-radio :label="1">是</el-radio>
                                    <el-radio :label="0">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "Clockin",

    data() {
        return {
            reported: false, //打卡提示显示
            drawer: false, //抽屉显示
            userInfo: { username: "admin", department: "运输部" }, //打卡人信息
            clockInForm: {}, //打卡记录数据
            historyTable: [
                { username: "小明", address: "河南省郑州市中原区", situation: "2" },
                { username: "a明", address: "河南省郑州市中原区", situation: "2" },
            ], //历史打卡记录
            queryMap: { pageSize: 4, pageNum: 1 },
            historyTotal: 0,
            nowTime: new Date(), //当前时间

            provinceList: [], // 省列表
            cityList: [], // 市列表
            originList: [], // 区列表
            cityOptions: [], // 市下拉框数据
            originOptions: [], // 区下拉框数据
            rules: {
                situation: [{ required: true, message: "请选择当前情况", trigger: "blur" }],
                touch: [{ required: true, message: "请选择是否接触", trigger: "blur" }],
                passby: [{ required: true, message: "请选择是否路过", trigger: "blur" }],
                reception: [{ required: true, message: "请选择是否招待", trigger: "blur" }],
                valueProvince: [{ required: true, message: "请输入省份", trigger: "blur" }],
                valueCity: [{ required: true, message: "请输入城市", trigger: "blur" }],
                valueOrigin: [{ required: true, message: "请输入区县", trigger: "blur" }],
            },
        };
    },

    mounted() {},

    methods: {
        // 打卡记录
        OpenHistory() {
            this.drawer = true;
            this.reportHistory();
        },
        // 记录打卡
        onSubmit() {},
        // 重置
        reset() {},

        // 获取打卡历史记录数据
        reportHistory() {},

        // 改变省份
        changeProvince() {},
        // 改变城市市
        changeCity() {},

        // 改变区
        changeOrigin() {},

        // 翻页
        handleCurrentChange(current) {
            this.queryMap.pageNum = current;
            this.reportHistory();
        },
    },
};
</script>

<style scoped></style>
